@@include('../00.global/include-header.html')
     
  <body class="page">
  
  
          
    @@include('../00.global/include-loader.html')
    
    

  
  
    <div class="wrapper">
    
        <!-- Header Area
        ============================================= -->      
        <header class="header-area transition">
            
             <div class="header-container transition">
                 <div class="container">
                 
                        @@include('../00.global/include-brand.html')
                        
                        @@include('../00.global/include-menu.html')
                        
                        
                        
                        
                  </div>
                  <!-- .container end -->
                  
                  <div class="clear"></div>
             </div>
        
        </header>
        <div class="header-inner"></div>
      
      
        <!-- Content 01
        ====================================================== -->
        <section class="space-none">
            <div class="container t-c">
                    <div class="row">
                        <div class="col-md-8 col-md-offset-2 t-c">
                            <h2>Container</h2>
                            
                        </div>
                    </div>
                    <!-- .row end -->
              
                    
            </div>
            <!-- .container end -->
 
        </section>
     
       
    
       <!-- Content 02
        ====================================================== -->
        <section>
            <div class="container list-normal table-normal">
                   
                    <div class="row">
                        <div class="col-md-4 col-md-offset-4" style="background: #eee;margin-bottom: 50px;">
							<h3>S Container</h3>
							<p>Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.</p>
                        </div>     
                        
                        
                    </div>
                    <!-- .row end -->  
                   
                   
                   
                    <div class="row">
                        <div class="col-md-8 col-md-offset-2" style="background: #eee;margin-bottom: 50px;">
							<h3>M Container</h3>
							<p>Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Cras mattis consectetur purus sit amet fermentum. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.</p>
                        </div>     
                        
                        
                    </div>
                    <!-- .row end -->
           
                   
                    <div class="row">
  
                        <div class="col-md-10 col-md-offset-1" style="background: #eee;margin-bottom: 50px;">
							<h3>L Container</h3>
							<p>Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Cras mattis consectetur purus sit amet fermentum. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.</p>
                        </div>           
                        
                    </div>
                    <!-- .row end -->     
                    
                     
                    <div class="row">
                        <div class="col-md-12" style="background: #eee;margin-bottom: 50px;">
							<h3>Max-width(Default), Max-width(XL), Max-width(XXL) Container</h3>
							<p>Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Cras mattis consectetur purus sit amet fermentum. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.</p>
                        </div>          
                        
                        
                    </div>
                    <!-- .row end -->       
                   
                    
            </div>
            <!-- .container end -->
 
        </section>   
        
        
     
       <!-- Full width Content
        ====================================================== -->
        <section class="space-none">
            <div class="container-fluid list-normal table-normal">
				<div class="col-md-12" style="background: #eee;margin-bottom: 50px;">
					<h3>100% Width</h3>
					<p>Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Cras mattis consectetur purus sit amet fermentum. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.</p>
				</div>    
                    
            </div>
            <!-- .container end -->
 
        </section>   
        
        
        
        
        <!-- Content 01
        ====================================================== -->
        <section class="space-none">
            <div class="container t-c">
                    <div class="row">
                        <div class="col-md-8 col-md-offset-2 t-c">
                            <h2>Column</h2>
                            
                        </div>
                    </div>
                    <!-- .row end -->
              
                    
            </div>
            <!-- .container end -->
 
        </section>
     
       
    
       <!-- Content 02
        ====================================================== -->
        <section>
            <div class="container">
                   

				<div class="row" style="padding: 20px 0px 20px 0px;">
					<div class="col-md-3">
						<h4>One Fourth (1)</h4>
						<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris a mi ac diam varius commodo sit amet a eros. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
					</div>
					<div class="col-md-3">
						<h4>One Fourth (2)</h4>
						<p>Aliquam congue dignissim tellus, vel eleifend urna rutrum nec. Morbi et mauris vitae quam venenatis imperdiet. Proin et rutrum magna. Nulla sed venenatis leo. Suspendisse potenti. Proin faucibus cursus luctus.</p>
					</div>
					<div class="col-md-3">
						<h4>One Fourth (3)</h4>
						<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris a mi ac diam varius commodo sit amet a eros. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
					</div>
					<div class="col-md-3">
						<h4>One Fourth (4)</h4>
						<p>Morbi et mauris vitae quam venenatis imperdiet. Proin et rutrum magna. Nulla sed venenatis leo. Suspendisse potenti. Proin faucibus cursus luctus.</p>
					</div>
				</div>
				<!-- /.row -->
				
				
				
				<div class="row" style="padding: 20px 0px 20px 0px;">
					<div class="col-md-4">
						<h4>One Third</h4>
						<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris a mi ac diam varius commodo sit amet a eros. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
					</div>
					<div class="col-md-4">
						<h4>One Third</h4>
						<p>Aliquam congue dignissim tellus, vel eleifend urna rutrum nec. Morbi et mauris vitae quam venenatis imperdiet. Proin et rutrum magna. Nulla sed venenatis leo. Suspendisse potenti. Proin faucibus cursus luctus.</p>
					</div>
					<div class="col-md-4">
						<h4>One Third</h4>
						<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris a mi ac diam varius commodo sit amet a eros. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
					</div>
				</div>
				<!-- /.row -->
				
				<div class="row" style="padding: 20px 0px 20px 0px;">
					<div class="col-xs-6 col-sm-6">
						<h4>One Half (SM)</h4>
						<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris a mi ac diam varius commodo sit amet a eros. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
					</div>
					<div class="col-xs-6 col-sm-6">
						<h4>One Half (SM)</h4>
						<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris a mi ac diam varius commodo sit amet a eros. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
					</div>
				</div>
				<!-- /.row -->
				
								
				
				<div class="row" style="padding: 20px 0px 20px 0px;">
					<div class="col-md-6">
						<h4>One Half</h4>
						<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris a mi ac diam varius commodo sit amet a eros. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
					</div>
					<div class="col-md-6">
						<h4>One Half</h4>
						<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris a mi ac diam varius commodo sit amet a eros. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
					</div>
				</div>
				<!-- /.row -->
				
				
				
				<div class="row" style="padding: 20px 0px 20px 0px;">
					<div class="col-md-3">
						<h4>One Third</h4>
						<p>Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
					</div>
					<div class="col-md-9">
						<h4>Two Third</h4>
						<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris a mi ac diam varius commodo sit amet a eros. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
					</div>
				</div>
				<!-- /.row -->
				
				
				
				<div class="row" style="padding: 20px 0px 20px 0px;">
					<div class="col-md-9">
						<h4>Two Third</h4>
						<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris a mi ac diam varius commodo sit amet a eros. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
					</div>
					<div class="col-md-3">
						<h4>One Third</h4>
						<p>Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
					</div>
				</div>
				<!-- /.row -->
				
				
				<div class="row" style="padding: 20px 0px 20px 0px;">
					<div class="col-md-4">
						<h4>One Fourth</h4>
						<p>Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
					</div>
					<div class="col-md-8">
						<h4>Three Fourth</h4>
						<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris a mi ac diam varius commodo sit amet a eros. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
					</div>
				</div>
				<!-- /.row -->
				
				
				
				<div class="row" style="padding: 20px 0px 20px 0px;">
					<div class="col-md-8">
						<h4>Three Fourth</h4>
						<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris a mi ac diam varius commodo sit amet a eros. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
					</div>
					<div class="col-md-4">
						<h4>One Fourth</h4>
						<p>Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
					</div>
				</div>
				<!-- /.row -->  
                   
                                       
                    
            </div>
            <!-- .container end -->
 
        </section>   
        
        
        <!-- Content 01
        ====================================================== -->
        <section class="space-none">
            <div class="container t-c">
                    <div class="row">
                        <div class="col-md-8 col-md-offset-2 t-c">
                            <h2>Center Column</h2>
							<p>The class <code>.row-center</code> used here will be applied <code>.row</code></p>
                            
                        </div>
                    </div>
                    <!-- .row end -->
              
                    
            </div>
            <!-- .container end -->
 
        </section>
     
       
    
       <!-- Content 02
        ====================================================== -->
        <section>
            <div class="container">
                   

				<div class="row row-center" style="padding: 20px 0px 20px 0px;">
					<div class="col-md-3">
						<h4>One Fourth (1)</h4>
						<p>Aliquam congue dignissim tellus, vel eleifend urna rutrum nec. Morbi et mauris vitae quam venenatis imperdiet. Proin et rutrum magna. Nulla sed venenatis leo. Suspendisse potenti. Proin faucibus cursus luctus.</p>
					</div>
					<div class="col-md-3">
						<h4>One Fourth (2)</h4>
						<p>Aliquam congue dignissim tellus, vel eleifend urna rutrum nec. Morbi et mauris vitae quam venenatis imperdiet. Proin et rutrum magna. Nulla sed venenatis leo. Suspendisse potenti. Proin faucibus cursus luctus.</p>
					</div>
				</div>
				<!-- /.row -->
				
				
				
				<div class="row row-center" style="padding: 20px 0px 20px 0px;">
					<div class="col-md-4">
						<h4>One Third</h4>
						<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris a mi ac diam varius commodo sit amet a eros. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
					</div>
					
				</div>
				<!-- /.row -->
				     
                    
            </div>
            <!-- .container end -->
 
        </section>   
        
        
        
        @@include('../00.global/include-copyright.html')
        
        
    </div>
    <!-- .wrapper end -->
       
       
    @@include('../00.global/include-footer.html')

